import React, { ReactNode } from 'react'
import classNames from 'classnames'
// 导入字体图标
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useNavigate } from 'react-router-dom'

type NavBarProps = {
  onLeftClick?: () => void
  children?: string | ReactNode
  extra?: string | ReactNode
  className?: string
}

// children是插槽
// extra代表组件右侧的内容，是通过props传递的属性名(extra)
export default function NavBar({
  onLeftClick,
  children,
  extra,
  className,
}: NavBarProps) {
  const navigate = useNavigate()
  // 当前默认点击左侧按钮是回到上一页页面，将来有一个地方就不是回到上一步，所以此处还需要做进一步修改
  const back = () => {
    // 如果外部有传递onLeftClick这个事件props过来，那么就执行这个onLeftClick对象的事件，否则默认返回上一个页面
    if (onLeftClick) {
      onLeftClick()
    } else {
      // 跳回上一页
      navigate(-1)
    }
  }
  return (
    <div className={classNames(styles.root, className)}>
      {/* 后退按钮 */}
      <div className="left" onClick={back}>
        <Icon type="iconfanhui"></Icon>
      </div>
      {/* 居中标题 */}
      <div className="title">{children}</div>

      {/* 右侧内容 */}
      <div className="right">{extra}</div>
    </div>
  )
}
